<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="5">
            <el-form-item label="品名">
              <el-select
                v-model="searchData.productID"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_instrument"
                clearable
              >
                <el-option
                  v-for="item in selectNameList"
                  :key="item.productID"
                  :label="item.productName"
                  :value="item.productID"
                >
                  <span style="float: left">{{ item.productName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.productID
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="合约">
              <el-select
                v-model="searchData.instrument"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="examine()"
                clearable
              >
                <el-option
                  v-for="item in instrumentList"
                  :key="item.instrument"
                  :label="item.instrumentName"
                  :value="item.instrument"
                >
                  <span style="float: left">{{ item.instrumentName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.instrument
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="default" size="mini" style="margin-top:5px">
              <d2-icon name="upload" />
              导出
            </el-button>
          </el-col>
        </el-row>
        <!-- <el-col :span="2" style="margin:0 0 1% 85%;">
          <el-button type="primary" size="mini" @click="search">
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col> -->
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">{{ searchData.instrument }}</p>
      </template>
      <div class="inner">
        <ve-candle
          :data="chartData"
          :settings="chartSettings"
          :extend="chartExtend"
          height="650px"
          width="100%"
        ></ve-candle>
      </div>
    </el-card>
  </d2-container>
</template>

<script>
import { quotFutures } from "@/api/url_info.js";
import { futureCommodity } from "@/api/url_info.js";
import { instrument } from "@/api/url_info.js";
export default {
  //期货
  name: "futures",
  components: {},
  data() {
    this.chartSettings = {
      showMA: true,
      showVol: true,
      // showDataZoom: true,
      downColor: "#00da3c",
      upColor: "#ec0000",
      labelMap: {
        日K: ""
      }
    };
    this.chartExtend = {
      series: {
        symbol: "none"
      },
      xAxis: {
        boundaryGap: true
      }
    };
    return {
      selectNameList: [],
      instrumentList: [],
      searchData: {
        date: "",
        productName: "",
        instrumentName: "",
        productID: "",
        instrument: ""
      },
      chartData: {
        columns: [
          "日期",
          "开盘",
          "收盘",
          "最低",
          "最高",
          "成交",
          "MA5",
          "MA10",
          "MA20",
          "MA30"
        ],
        rows: []
      }
    };
  },
  mounted() {
    this.handle_futureCommodity();
  },
  methods: {
    // 查询期货品名
    handle_futureCommodity() {
      futureCommodity({ type: "futures" })
        .then(res => {
          this.selectNameList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectNameList[i] = {
              productID: data1[i]["productID"],
              productName: data1[i]["productName"]
            };
          }
          if (this.searchData.productID == "") {
            this.searchData.productID = data1[0]["productID"];
            this.searchData.productName = data1[0]["productName"];
            this.handle_instrument();
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询合约
    handle_instrument() {
      this.searchData.instrument = "";
      this.searchData.instrumentName = "";
      this.examine();
      if (this.searchData.productID) {
        instrument({ productID: this.searchData.productID })
          .then(res => {
            this.instrumentList = [];
            var data1 = res.result;
            for (var i = 0; i < data1.length; i++) {
              this.instrumentList[i] = {
                instrument: data1[i]["instrument"],
                instrumentName: data1[i]["instrumentName"]
              };
            }
            if (this.searchData.productID != "") {
              this.searchData.instrument = data1[0]["instrument"];
              this.searchData.instrumentName = data1[0]["instrumentName"];
              this.examine();
            }
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      }
    },
    // // 查询
    // search() {
    //   this.examine();
    // },
    //查看
    async examine() {
      let params = {
        instrumentID: this.searchData.instrument
      };
      await quotFutures(params)
        .then(res => {
          this.$nextTick(() => {
            let chartData = [];
            let data = res.result;
            for (var i = 0; i < data.length; i++) {
              chartData[i] = {
                日期: data[i]["TradingDay"],
                开盘: data[i]["oprice"],
                收盘: data[i]["cprice"],
                最低: data[i]["lprice"],
                最高: data[i]["hprice"],
                成交: data[i]["volume"],
                MA5: data[i]["MA5"],
                MA10: data[i]["MA10"],
                MA20: data[i]["MA20"],
                MA30: data[i]["MA30"]
              };
            }
            this.chartData.rows = chartData;
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  }
};
</script>
<style></style>
